<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="renderer" content="webkit" />
<link href="../css/bootstrap.min.css" rel="stylesheet" />
<link href="../css/font-awesome.min.css" rel="stylesheet" />
<link href="../css/plugins/chosen/chosen.css" rel="stylesheet" />
<link href="../css/plugins/dataTables/dataTables.bootstrap.css"
	rel="stylesheet" />
<link href="../css/plugins/toastr/toastr.min.css" rel="stylesheet" />
<link href="../css/animate.css" rel="stylesheet" />
<link href="../css/style.css" rel="stylesheet" />
</head>
<body class="top-navigation">
	<div id="wrapper">
		<div id="page-wrapper" class="gray-bg dashbard-1">
			<div class="row border-bottom">
				<nav class="navbar navbar-static-top" data-role="navigation"
					style="margin-bottom:0">
					<div class="navbar-header">
						<div class="minimalize-styl-2">
							<a class="btn btn-primary" href="main.html"><i
								class="fa fa-home"></i> 主页</a>
							<!-- ++++++++++++++++++++++++++++++++ -->
							<ol id="guide" class="breadcrumb m-l">
								<li><a>调度中心</a></li>
								<li><strong>修改订单</strong></li>
							</ol>
							<!-- ################################ -->
						</div>
					</div>
					<ul class="nav navbar-top-links navbar-right">
						<li><span class="text-muted welcome-message">欢迎使用Feces物流管理系统</span></li>
						<li><a href="login.html"><i class="fa fa-sign-out"></i>
								退出</a></li>
					</ul>
				</nav>
			</div>
			<div class="wrapper wrapper-content animated fadeInRight">
				<div class="col-lg-12">
					<div class="ibox float-e-margins">
						<div class="ibox-title">
							<!-- ++++++++++++++++++++++++++++++++ -->
							<h5>订单</h5>
							<!-- ################################ -->
							<div class="ibox-tools">
								<!-- ++++++++++++++++++++++++++++++++ -->
								<a class="collapse-link btn-link btn-sm"> 收起/展开<i
									class="fa fa-chevron-up"></i>
								</a>
								<!-- ################################ -->
							</div>
						</div>
						<div class="ibox-content">
							<!-- ++++++++++++++++++++++++++++++++ -->
							<table class="table table-striped table-bordered table-hover"
								id="order_list">
								<thead>
									<tr>
										<th>订单号</th>
										<th>商品代号</th>
										<th>商品名称</th>
										<th>商品数量</th>
										<th>订单状态</th>
										<th>订单类型</th>
										<th>操作</th>
									</tr>
								</thead>
								<tbody></tbody>
								<tfoot>
									<tr>
										<th>订单号</th>
										<th>商品代号</th>
										<th>商品名称</th>
										<th>商品数量</th>
										<th>订单状态</th>
										<th>订单类型</th>
										<th>操作</th>
									</tr>
								</tfoot>
							</table>
							<!-- ################################ -->
						</div>
					</div>
				</div>
			</div>
			<div class="wrapper wrapper-content animated fadeInRight">
				<div class="row">
					<div class="col-lg-12">
						<div class="ibox float-e-margins">
							<div class="ibox-title">
								<h5>订单查询</h5>
								<div class="ibox-tools">
									<!-- ++++++++++++++++++++++++++++++++ -->
									<a class="btn-rounded btn-primary btn-sm"> 刷新<i
										class="fa fa-refresh"></i>
									</a> <a class="collapse-link btn-link btn-sm"> 收起/展开<i
										class="fa fa-chevron-up"></i>
									</a>
								</div>
							</div>
							<div class="ibox-content">
								<form method="post" id="query" class="form-inline"
									data-role="form">
									<div class="form-group">
										<label for="query-storehouse" class="control-label sr-only">订单类型</label>
										<select class="form-control" id="order-type">
											<option value="all">全部</option>
											<option value="new">新订</option>
											<option value="new">换货</option>
											<option value="new">退货</option>
											<option value="new">退订</option>
										</select>
									</div>
									<div class="form-group">
										<label for="query-range" class="control-label sr-only">送货日期</label>
										<div class="input-daterange input-group">
											<input id="query-start" name="start" class="form-control"
												type="text" placeholder="请选择送货日期" required>
										</div>
									</div>
									<div class="form-group">
										<button class="btn btn-outline btn-primary" type="submit">查
											询</button>
									</div>
								</form>
								<table class="table table-striped table-bordered table-hover">
								</table>
								<!-- ################################ -->
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script src="../js/jquery-2.1.1.min.js"></script>
	<script src="../js/bootstrap.min.js"></script>
	<script src="../js/plugins/chosen/chosen.jquery.js"></script>
	<script src="../js/plugins/datepicker/bootstrap-datepicker.js"></script>
	<script src="../js/plugins/dataTables/jquery.dataTables.js"></script>
	<script src="../js/plugins/dataTables/dataTables.bootstrap.js"></script>
	<script src="../js/plugins/jeditable/jquery.jeditable.js"></script>
	<script src="../js/plugins/metisMenu/jquery.metisMenu.js"></script>
	<script src="../js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
	<script src="../js/plugins/toastr/toastr.min.js"></script>
	<script src="../js/feces.js"></script>
	<script src="../js/plugins/pace/pace.min.js"></script>
	<script>
		$(function() {
			var dataURL = '../api/orders.json';
			var crudURL = '../api/order';
			var convert = function(order) {
				return [ 	order.id, 
				         	order.products[0].product_id,
							order.products[0].product.name,
							order.num,
							order.status, 
							order.type,
						null ];
			};
			$('#order_list')
					.dataTable(
							{
								ajax : {
									url : dataURL,
									dataSrc : function(response) {
										return response.data.map(convert);
									},
								},
								stateSave : true,
								createdRow : function(row, data, dataIndex) {
									$(row).data({
										id : data[0]
									});
									$('td:eq(4)', row).data({
										col : 'type'
									}).attr('data-edit', 'text');
									$('td:eq(6)', row)
											.append(
													$('<a></a>')
															.addClass(
																	'btn btn-outline btn-primary btn-xs')
															.attr('href',
																	'javascript:void(0);')
															.text('修改')
															.click(
																	function() {
																		toastr.error('修改失败')
																	}));
								},
								initComplete : function() {
									$('[data-edit]', this).attr('title',
											'点击以编辑');
									$('[data-edit="text"]', this).editable(
											function(value) {
												put.apply(this, arguments);
												return value;
											}, {
												submit : '确定',
												cancel : '取消',
												height : '100%'
											});
									$('[data-edit="select"]', this).editable(
											function(value) {
												put.apply(this, arguments);
												return types[value];
											}, {
												type : 'select',
												data : JSON.stringify(types),
												submit : '确定',
												cancel : '取消',
												height : '100%'
											});
								}
							});
			$('select').chosen();
			$('.input-daterange').datepicker({
				keyboardNavigation : false,
				forceParse : false,
				autoclose : true
			});
		});
	</script>
</body>
</html>